<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="top">
          <el-row type="flex">
            <el-col :span="12">
              <el-button
                size="samll"
                type="primary"
                @click="addFn"
              >添加房产</el-button>
            </el-col>
            <el-col :span="12">
              <el-row type="flex" justify="end">
                <el-select v-model="category" placeholder="全部分类" size="small">
                  <!-- .native：可以帮助我们在组件上绑定事件 -->
                  <el-option v-for="item in sortList" :key="item.id" :value="item.id" :label="item.title" @click.native="Classify(item.id)" />
                </el-select>
                <el-select v-model="agent" placeholder="全部经济" size="small">
                  <el-option v-for="item in brokerList" :key="item.id" :value="item.id" :label="item.name" @click.native="Economic(item.id)" />
                </el-select>
                <el-input
                  v-model="input"
                  size="small"
                  style="width: 417px"
                  type="text"
                  placeholder="请输入关键字"
                />
                <el-button size="small" @click="searchFn">筛选</el-button>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div class="bottom">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="封面" width="180">
              <template v-slot="{ row }">
                <img
                  :src="row.image"
                  style="width: 100px"
                >
              </template>
            </el-table-column>
            <el-table-column label="标题" prop="title" />
            <el-table-column label="标签" prop="label">
              <template v-slot="{row}">
                <el-tag
                  v-for="(item,index) in row.tags"
                  :key="index"
                  type="success"
                >
                  {{ item }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="地址" prop="address" />
            <el-table-column label="分类" prop="category.title" />
            <el-table-column label="经济" prop="agent.name" />
            <el-table-column label="价格" prop="price" />
            <el-table-column label="介绍" prop="desc" />
            <el-table-column label="图片" width="180">
              <template v-slot="{ row }">
                <img
                  :src="row.image"
                  style="width: 100px"
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="{row}">
                <el-button type="primary" size="small" @click="editorFn(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <el-pagination
              :page-size="limit"
              layout="prev, pager, next"
              :total="total"
              @current-change="curChange"
            />
          </el-row>
        </div>
      </el-card>
      <AddDialog ref="addRole" :show-visible.sync="showVisible" @addEvents="gethousepropertyList" />
    </div>
  </div>
</template>

<script>
import { delhousemount, gethouseamount, gethouselist, geteconomicslist } from '@/api/propertyManagement'
import AddDialog from './components/house-property.vue'
import { getclassifycation } from '@/api/classification'
export default {
  components: {
    AddDialog
  },
  data() {
    return {
      label: [], // 标签
      showVisible: false,
      total: 0,
      tableData: [],
      limit: 5, // 每页的获取条数
      start: 0, // 开始获取的位置
      title_contains: '东圃', // 模糊搜索标题
      brokerList: [], // 经济列表
      sortList: [], // 分类列表
      category: '全部分类', // 筛选全部分类
      agent: '全部经济', // 筛选全部经济
      input: '' // 筛选输入框
    }
  },
  async created() {
    this.gethousepropertyList()// 渲染
    const res = await geteconomicslist()// 经济列表
    // console.log(111, res)
    this.brokerList = res.data
    const list = await getclassifycation()// 分类列表
    // console.log(222, list)
    this.sortList = list.data
  },
  methods: {
    // 控制分页的切换
    curChange(pager) {
      this.start = pager === 1 ? 0 : (pager - 1) * this.limit
      this.gethousepropertyList()
    },
    // 筛选函数
    async searchFn() {
      // 判断分类和经济是否有id
      if (this.classify || this.economic) {
        // 有id就执行调用获取列表接口传递分类和经济id
        const res = await gethouselist({
          category: this.classify,
          agent: this.economic
        })
        // console.log(146, res)
        this.tableData = res.data// 筛选后的值重新给到数组
        this.total = this.tableData.length// 数组的长度等于分页的总数
        // 清空搜索
        this.category = '全部分类' // 筛选全部分类
        this.agent = '全部经济' // 筛选全部经济
      } else {
        // 调用接口传递筛选输入框的值
        const res = await gethouselist({
          title_contains: this.input
        })
        this.tableData = res.data// 筛选后的值重新给到数组
        this.total = this.tableData.length
        // 清空输入框
        this.input = '' // 筛选输入框
      }
    },
    // 筛选分类id
    Classify(id) {
      this.classify = id
    },
    // 筛选经济id
    Economic(id) {
      this.economic = id
    },
    // 封装渲染列表
    async gethousepropertyList() {
      const res = await gethouselist({
        _limit: this.limit,
        _start: this.start
      })
      // console.log(120, res)
      this.tableData = res.data// 拿到渲染的数据
      // 拿到分页总数量
      const list = await gethouseamount()
      // console.log(133, list)
      this.total = list.data// 拿到总数量

      // 拿到data里面的tags数组进行遍历-----标签的内容
      this.label = res.data.map(el => {
        return el.tags
      })
      // console.log(130, this.label)
    },
    // 打开新增弹窗
    addFn() {
      this.showVisible = true
    },
    // 打开编辑弹窗
    editorFn(id) {
      this.showVisible = true
      // 数据回显
      this.$refs.addRole.geteditor(id)
    },
    // 删除
    delFn(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async() => {
        // 调用删除接口
        await delhousemount(id)
        // 重新渲染
        this.gethousepropertyList()
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
.el-row{
  justify-content: space-between;
}
.el-col-24 {
    display: flex;
    width: 80px;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
}
 .el-dropdown-link {
    cursor: pointer;
    color: #000;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
.bottom{
  margin-top: 20px;
}

</style>

